This meme pokes fun at me. I make the occasional typo and it messes everything up, giving me a big pile of errors. And it’s a little bit meta: the console screenshot is an actual screenshot of my own RStudio in the early stages of “meme.R”.
# behold, R code for my meme.
library(magick)
# color variables in one place
top_colour <- "hsl(0, 0, 97%)"
mid_colour <- "hsl(215, 35%, 93%)"
heading_colour <- "hsl(0, 0, 15%)"
subheading_colour <- "hsl(215, 20%, 20%)"
border_colour <- "hsl(260, 40%, 30%)"
#generate top section (the title)
top_section <- image_blank(width = 700, height = 100, color = top_colour) %>%
image_annotate(text = "who would win?", color = heading_colour,
size = 40, font = "SF Pro Display", weight = 700, gravity = "center")
#generate left side content
left_text <- image_blank(width = 345, height = 100, color = mid_colour) %>%
image_annotate(text = "decades of development in the\ncomputer and data sciences", color = subheading_colour,
size = 20, font = "SF Pro Display", weight = 700, gravity = "center")
left_image <- image_read("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/CERN_Server_03.jpg/640px-CERN_Server_03.jpg") %>%
image_scale(345)
#generate right side content
right_text <- image_blank(width = 345, height = 100, color = mid_colour) %>%
image_annotate(text = "one random teenager forgetting\na comma in their code", color = subheading_colour,
size = 20, font = "SF Pro Display", weight = 700, gravity = "center")
right_image <- image_read("https://aqq.xyz/content/stats220_meme_image.png") %>%
image_scale(345)
#generate the little divider in the middle
dividing_line <- image_blank(width = 10, height = 330, color = border_colour)
#combine the text and the images on either side
left_section <- image_append(c(left_text, left_image), stack = TRUE)
right_section <- image_append(c(right_text, right_image), stack = TRUE)
#combine the left/right sections again into the "bottom section"
bottom_section <- image_append(c(left_section, dividing_line, right_section))
#combine the top and bottom sections to make the final meme
meme <- c(top_section, bottom_section) %>%
image_append(stack = TRUE) %>%
image_scale(800)
meme
image_write(meme, "content/my_meme.png")
This GIF is a short, fun sequence of a “rollercoaster” (affectionately named the R-ollercoaster) going up and down against an animated gradient background. It’s open to interpretation - maybe it’s a representation of the ups and downs of learning a new programming language, or maybe it’s just here to look pretty. Either way, I like watching it go.
library(magick)
# defining colour variables (mostly for the 25 colour gradient)
gradient1 <- "hsl(215, 65%, 65%)"
gradient2 <- "hsl(235, 65%, 65%)"
gradient3 <- "hsl(255, 65%, 65%)"
gradient4 <- "hsl(275, 65%, 65%)"
gradient5 <- "hsl(295, 65%, 65%)"
gradient6 <- "hsl(315, 65%, 65%)"
gradient7 <- "hsl(335, 65%, 65%)"
gradient8 <- "hsl(355, 65%, 65%)"
gradient9 <- "hsl(15, 65%, 65%)"
gradient10 <- "hsl(35, 65%, 65%)"
gradient11 <- "hsl(55, 65%, 65%)"
gradient12 <- "hsl(75, 65%, 65%)"
gradient13 <- "hsl(95, 65%, 65%)"
gradient14 <- "hsl(115, 65%, 65%)"
gradient15 <- "hsl(135, 65%, 65%)"
gradient16 <- "hsl(155, 65%, 65%)"
gradient17 <- "hsl(170, 65%, 65%)"
gradient18 <- "hsl(185, 65%, 65%)"
gradient19 <- "hsl(200, 65%, 65%)"
gradient20 <- "hsl(205, 65%, 65%)"
gradient21 <- "hsl(205, 75%, 75%)"
gradient22 <- "hsl(205, 85%, 85%)"
gradient23 <- "hsl(205, 95%, 95%)"
gradient24 <- "hsl(205, 75%, 75%)"
gradient25 <- "hsl(205, 65%, 65%)"
text_colour <- "hsl(0, 95%, 95%"
# importing rollercoaster asset
rollercoaster_image <- image_read("https://aqq.xyz/content/stats220_rollercoaster.png") %>%
image_scale(200)
# creating all 25 frames
frame1 <- image_blank(width = 800, height = 500, color = gradient1) %>%
image_composite(rollercoaster_image, offset = "+0+70")
frame2 <- image_blank(width = 800, height = 500, color = gradient2) %>%
image_composite(rollercoaster_image, offset = "+30+80")
frame3 <- image_blank(width = 800, height = 500, color = gradient3) %>%
image_composite(rollercoaster_image, offset = "+50+100")
frame4 <- image_blank(width = 800, height = 500, color = gradient4) %>%
image_composite(rollercoaster_image, offset = "+70+120")
frame5 <- image_blank(width = 800, height = 500, color = gradient5) %>%
image_composite(rollercoaster_image, offset = "+90+160")
frame6 <- image_blank(width = 800, height = 500, color = gradient6) %>%
image_composite(rollercoaster_image, offset = "+110+230")
frame7 <- image_blank(width = 800, height = 500, color = gradient7) %>%
image_composite(rollercoaster_image, offset = "+130+300")
frame8 <- image_blank(width = 800, height = 500, color = gradient8) %>%
image_composite(rollercoaster_image, offset = "+160+350")
frame9 <- image_blank(width = 800, height = 500, color = gradient9) %>%
image_composite(rollercoaster_image, offset = "+190+390")
frame10 <- image_blank(width = 800, height = 500, color = gradient10) %>%
image_composite(rollercoaster_image, offset = "+230+400")
frame11 <- image_blank(width = 800, height = 500, color = gradient11) %>%
image_composite(rollercoaster_image, offset = "+270+400")
frame12 <- image_blank(width = 800, height = 500, color = gradient12) %>%
image_composite(rollercoaster_image, offset = "+300+380")
frame13 <- image_blank(width = 800, height = 500, color = gradient13) %>%
image_composite(rollercoaster_image, offset = "+330+350")
frame14 <- image_blank(width = 800, height = 500, color = gradient14) %>%
image_composite(rollercoaster_image, offset = "+350+300")
frame15 <- image_blank(width = 800, height = 500, color = gradient15) %>%
image_composite(rollercoaster_image, offset = "+370+240")
frame16 <- image_blank(width = 800, height = 500, color = gradient16) %>%
image_composite(rollercoaster_image, offset = "+400+160")
frame17 <- image_blank(width = 800, height = 500, color = gradient17) %>%
image_composite(rollercoaster_image, offset = "+430+100")
frame18 <- image_blank(width = 800, height = 500, color = gradient18) %>%
image_composite(rollercoaster_image, offset = "+460+70")
frame19 <- image_blank(width = 800, height = 500, color = gradient19) %>%
image_composite(rollercoaster_image, offset = "+500+50")
frame20 <- image_blank(width = 800, height = 500, color = gradient20) %>%
image_composite(rollercoaster_image, offset = "+530+40")
frame21 <- image_blank(width = 800, height = 500, color = gradient21) %>%
image_composite(rollercoaster_image, offset = "+560+40")
frame22 <- image_blank(width = 800, height = 500, color = gradient22) %>%
image_composite(rollercoaster_image, offset = "+590+50")
frame23 <- image_blank(width = 800, height = 500, color = gradient23) %>%
image_composite(rollercoaster_image, offset = "+620+70")
frame24 <- image_blank(width = 800, height = 500, color = gradient24) %>%
image_composite(rollercoaster_image, offset = "+650+100")
frame25 <- image_blank(width = 800, height = 500, color = gradient25) %>%
image_composite(rollercoaster_image, offset = "+670+140")
# throwing these frames into a vector
frames <- c(frame1, frame2, frame3, frame4, frame5, frame6, frame7, frame8, frame9, frame10,
frame11, frame12, frame13, frame14, frame15, frame16, frame17, frame18, frame19,
frame20, frame21, frame22, frame23, frame24, frame1)
#creating the animation (with a high frame rate) and exporting etc
animation <- image_morph(frames, frames = 8) %>%
image_animate(fps = 50)
animation
image_write(animation, "content/my_animation.gif")
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');
/* Some color variables */
:root{
--bg: hsl(260, 5%, 98%);
--greyBg: hsl(220, 15%, 90%);
--darkText: hsl(0, 0%, 20%);
--lightText: hsl(330, 5%, 55%);
--accentText: hsl(330, 70%, 45%);
}
*{
background-color: var(--bg);
}
/* Keeps the body centered and reduces its width to improve readability */
body {
margin: 0 auto;
width: 75%;
max-width: 850px;
background-color: inherit;
font-family: Outfit, sans-serif;
font-size: 16px;
color: var(--darkText);
}
/* Bold headings with modified spacing */
h1{
margin-bottom: 5px;
font-weight: 700;
line-height: 1;
}
h2{
margin-top: 8%;
font-weight: 700;
}
/* Different (default) font for paragraph text */
p{
font-family: sans-serif;
}
/* Slightly reduces the width of the image and code blocks and adds a small border around the image */
img{
margin: 30px auto;
display: block;
width: 90%;
padding: 10px;
background-color: var(--greyBg);
border-radius: 15px;
}
pre{
margin: 50px auto;
width: 90%;
}
/* Font weight / colour hierarchy in the header */
#header{
margin-top: 15%;
}
.title{
color: var(--accentText);
}
.subtitle{
margin-top: 0;
margin-bottom: 20px;
color: var(--lightText);
}
.author{
font-weight: 700;
}
.author, .date{
margin-top: 5px;
margin-bottom: 5px;
text-align: right;
}